//引入组件
import login from '@/views/login/login.vue'
import VueRouter from 'vue-router'
//定义路由规则
const routes=[
    {
        path:'/login',
        name: 'login',
        component:login
    },
    {
        path:'/',
        name: 'main',
        component:()=>import('@/views/main')
    },
    {
        path:'/register',
        name: 'register',
        component:()=>import('@/views/register')
    },
    {
        path:'/classroom',
        name:'classroom',
        component:()=>import('@/views/classroom.vue')
    },
    {
        path:'/product',
        name:'product',
        component:()=>import('@/views/product'),
        //props:true //父组件向子组件传值
        // 函数返回一个对象，该对象的内容将作为props传入组件
        props: (route) => ({ 
            // 将查询字符串参数 `q` 映射为组件的 `searchQuery` prop
            userid: route.params.userid,
            // 可以添加默认值或进行类型转换
            username: route.params.username,
        })
    },
    {
        path:'/user',
        name:'user',
        component:()=>import('@/views/user'),
        children:[
            {
                path:'',
                name:'userList',
                component:()=>import('@/views/user/list.vue')
            },
            {
                path:'add',
                name:'userAdd',
                component:()=>import('@/views/user/add.vue')
            },
            {
                path:'edit',
                name:'userEdit',
                component:()=>import('@/views/user/update.vue')
            }
        ]

    },
    {
        //当都不存在时，跳转到404页面
        path:'*',
        component:()=>import('@/views/404.vue')

    },

  ]
  //创建路由实例
  const router=new VueRouter({
    // 路由模式 history: history模式，url有#号；hash: 默认模式，url无#号
    mode:'history',
    routes
  })
export default router